<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>11.bootstrap的页头缩略图警告框进度条</title>
        <!-- bootstrap的动态功能都是依靠jquery的， 所以要引入jquery，而且要在它的前面-->
        <!-- jquery库, bootstrap依赖于jquery -->
        <script src="static/js/jquery-3.4.1.js"></script>
        <!-- bootstrap的样式 -->
        <link rel="stylesheet" href="static/css/bootstrap.css">
        <!-- bootstrap的js -->
        <script src="static/js/bootstrap.js"></script>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-sm-10 col-sm-offset-1">
                    <p class="lead text-info"><strong>页头的使用</strong></p>
                    <div class="page-header">
                        <h1>页头组件能够为 h1 标签增加适当的空间，并且与页面的其他部分形成一定的分隔。
                            它支持 h1 标签内内嵌 small 元素的默认效果，<small>还支持大部分其他组件（需要增加一些额外的样式）</small></h1>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-10 col-sm-offset-1">
                    <p class="lead text-info"><strong>缩略图简单使用</strong></p>
                    <a href="#" class="thumbnail">
                        <img style="width: 100px; height: 100px;" src="static/img/i0.jpg" alt="图片代替文字">
                    </a>
                    <a href="#" class="thumbnail">
                        <img style="width: 100px; height: 100px;" src="static/img/i1.jpg" alt="图片代替文字">
                    </a>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-10 col-sm-offset-1">
                    <p class="lead text-info"><strong>缩略图，放多张图片在同一行</strong></p>
                    <p>
                        <a href="#" class="thumbnails">
                            <img style="width: 100px; height: 100px; margin: 7px;" src="static/img/i0.jpg"
                                 alt="图片代替文字" title="悬浮文字0">
                            <img style="width: 100px; height: 100px; margin: 7px;" src="static/img/i1.jpg"
                                 alt="图片代替文字" title="悬浮文字1">
                            <img style="width: 100px; height: 100px; margin: 7px;" src="static/img/i2.jpg"
                                 alt="图片代替文字" title="悬浮文字2">
                            <img style="width: 100px; height: 100px; margin: 7px;" src="static/img/i3.jpg"
                                 alt="图片代替文字" title="悬浮文字3">
                            <img style="width: 100px; height: 100px; margin: 7px;" src="static/img/i4.jpg"
                                 alt="图片代替文字" title="悬浮文字4">
                            <img style="width: 100px; height: 100px; margin: 7px;" src="static/img/i5.jpg"
                                 alt="图片代替文字" title="悬浮文字5">
                            <img style="width: 100px; height: 100px; margin: 7px;" src="static/img/i6.jpg"
                                 alt="图片代替文字" title="悬浮文字6">
                            <img style="width: 100px; height: 100px; margin: 7px;" src="static/img/i7.jpg"
                                 alt="图片代替文字" title="悬浮文字7">
                        </a>
                    </p>
                    <div class="row">
                        <a href="#" class="thumbnails">
                            <img style="width: 100px; height: 100px; margin: 7px;" src="static/img/i8.jpg"
                                 alt="图片代替文字" title="悬浮文字8">
                            <img style="width: 100px; height: 100px; margin: 7px;" src="static/img/i9.jpg"
                                 alt="图片代替文字" title="悬浮文字9">
                            <img style="width: 100px; height: 100px; margin: 7px;" src="static/img/i10.jpg"
                                 alt="图片代替文字" title="悬浮文字10">
                            <img style="width: 100px; height: 100px; margin: 7px;" src="static/img/i11.jpg"
                                 alt="图片代替文字" title="悬浮文字11">
                            <img style="width: 100px; height: 100px; margin: 7px;" src="static/img/i12.jpg"
                                 alt="图片代替文字" title="悬浮文字12">
                            <img style="width: 100px; height: 100px; margin: 7px;" src="static/img/i13.jpg"
                                 alt="图片代替文字" title="悬浮文字13">
                            <img style="width: 100px; height: 100px; margin: 7px;" src="static/img/i14.gif"
                                 alt="图片代替文字" title="悬浮文字14">
                            <img style="width: 100px; height: 100px; margin: 7px;" src="static/img/i15.jpg"
                                 alt="图片代替文字" title="悬浮文字15">
                        </a>
                    </div>

                </div>
            </div>

            <div class="row">
                <div class="col-sm-10 col-sm-offset-1">
                    <p class="lead text-info"><strong>普通的警告框</strong></p>
                    <div class="alert alert-success">成功了啊！</div>
                    <div class="alert alert-info">提示！</div>
                    <div class="alert alert-warning">警告！</div>
                    <div class="alert alert-danger">危险啊！</div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-10 col-sm-offset-1">
                    <p class="lead text-info"><strong>可以关闭的提示框</strong></p>
                    <div class="alert alert-success">
                        <span class="text-success"><strong>成功了啊！</strong></span>
                        <button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
                    </div>
                    <div class="alert alert-info">
                        <span>提示！</span>
                        <button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
                    </div>
                    <div class="alert alert-danger">
                        <span class="text-danger"><strong>危险啊！</strong></span>
                        <button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-10 col-sm-offset-1">
                    <p class="lead text-info"><strong>提示框里面的链接</strong></p>
                    <div class="alert alert-danger">
                        <span class="text-danger"><strong>您已经中毒！</strong>
                            <a href="www.baidu.com" class="alert-link" title="要解毒，上百毒！">要解毒，上百毒！</a>
                        </span>
                        <button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
                    </div>
                </div>
            </div>

            <!-- 进度条就是progress, 外面包一层progress， 里面的话就是一个进度条的bar, progress-bar，可以设置各种样式-->
            <div class="row">
                <div class="col-sm-10 col-sm-offset-1">
                    <p class="lead text-info"><strong>基本的进度条</strong></p>
                    <div class="progress">
                        <div class="progress-bar" style="width: 60%;">
                            <span class="sr-only">60% Complete</span>
                        </div>
                    </div>
                </div>
                <div class="col-sm-10 col-sm-offset-1">
                    <p class="lead text-info"><strong>带有提示的进度条</strong></p>
                    <div class="progress">
                        <div class="progress-bar progress-bar-danger" style="width: 62%;">
                            <span>62%</span>
                        </div>
                    </div>

                    <!-- 这样也是可以的，但是没有背景，还是用progress包裹起来，比较好一点 -->
                    <div class="progress-bar progress-bar-success" style="width: 77%; margin-bottom: 20px;">
                        <span>77%</span>
                    </div>

                </div>

                <div class="col-sm-10 col-sm-offset-1">
                    <p class="lead text-info"><strong>条纹状的进度条，进度由style="width" 决定</strong></p>
                    <div class="progress">
                        <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 40%">
                            <span> 40% 已经完成！</span>
                        </div>
                    </div>
                    <div class="progress">
                        <!-- span 的class="sr-only" 让文字无法显示-->
                        <div class="progress-bar progress-bar-info progress-bar-striped" style="width: 20%">
                            <span class="sr-only">20% Complete</span>
                        </div>
                    </div>
                    <div class="progress">
                        <div class="progress-bar progress-bar-danger progress-bar-striped" style="width: 89%">
                            <span>89%</span>
                        </div>
                    </div>
                </div>

                <div class="col-sm-10 col-sm-offset-1">
                    <p class="lead text-info"><strong>条纹的动画，激活动画，使用active</strong></p>
                    <div class="progress">
                        <div class="progress-bar progress-bar-info progress-bar-striped active" style="width: 45%">
                            <span class="sr-only">45% Complete</span>
                        </div>
                        <!-- 一个progress之中只能展示一个progressbar， 如果多个progressbar放在一起就堆叠，超过100，只能显示一个 -->
                        <div class="progress-bar progress-bar-danger progress-bar-striped active" style="width: 20%">
                            <span class="sr-only">20% Complete</span>
                        </div>
                    </div>
                    <div class="progress">
                        <div class="progress-bar progress-bar-danger progress-bar-striped active" style="width: 92%">
                            <span>92% Complete</span>
                        </div>
                    </div>
                </div>

                <div class="col-sm-10 col-sm-offset-1">
                    <p class="lead text-info"><strong>动画堆叠效果，放在同一个progress之中，但是总和不能超过100</strong></p>
                    <div class="progress">
                        <div class="progress-bar progress-bar-success" style="width: 35%">
                            <span>35%已经完成！</span>
                        </div>
                        <div class="progress-bar progress-bar-warning progress-bar-striped active" style="width: 40%">
                            <span>40%已经完成！</span>
                        </div>
                        <div class="progress-bar progress-bar-danger" style="width: 10%">
                            <span class="sr-only">10% Complete (danger)</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

